<template>
  <div class="app-service-center-content-monitor__center__env" v-show="show">
    <div class="app-service-center-content-monitor__center__env__left-part">
      <div class="app-service-center-content-monitor__center__env__left-part__top-part" ref="leftTop"></div>
      <div class="app-service-center-content-monitor__center__env__left-part__bottom-part" ref="leftBottom"></div>
    </div>
    <div class="app-service-center-content-monitor__center__env__right-part">
      <div class="app-service-center-content-monitor__center__env__right-part__top-part" ref="rightTop"></div>
      <div class="app-service-center-content-monitor__center__env__right-part__bottom-part" ref="rightBottom">
        <t-table :items="tableData" size="mini" border stripe>
          <t-table-column label="环境项目" prop="name" id="0" width="4"></t-table-column>
          <t-table-column label="实时" prop="value" id="1" width="2"></t-table-column>
          <t-table-column label="最佳" prop="perfect" id="2" width="2"></t-table-column>
        </t-table>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';

  export default {
    name: 'app-service-center-content-monitor-env',
    components: {
      TTable,
      TTableColumn,
    },
    props: {
      envs: Object,
      show: Boolean,
    },
    data() {
      return {
        tableData: [{
          name: '实时 [温度]',
          value: '0 °C',
          perfect: '待评估',
        }, {
          name: '实时 [湿度]',
          value: '0 %RH',
          perfect: '待评估',
        }, {
          name: '实时 [光照]',
          value: '0 Lux',
          perfect: '待评估',
        }],
        temInstance: null,
        temOption: {
          title: {
            text: '今日 [工作台] 温度',
            x: '5%',
            y: '0%',
          },
          tooltip: {
            trigger: 'axis',
          },
          toolbox: {
            show: true,
            x: '75%',
            y: '5%',
            feature: {
              magicType: { type: ['line', 'bar'] },
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            scale: true,
            type: 'value',
            splitNumber: '2',
            axisLabel: {
              formatter: '{value} °C',
            },
          },
          grid: {
            show: false,
            bottom: '17.5%',
            left: '15%',
            right: '15%',
            top: '25%',
          },
          series: [
            {
              name: '气温',
              type: 'line',
              data: [],
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' },
                ],
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' },
                ],
              },
            },
          ],
        },
        humInstance: null,
        humOption: {
          title: {
            text: '今日  [工作台] 湿度',
            x: '5%',
            y: '5%',
          },
          tooltip: {
            trigger: 'axis',
          },
          toolbox: {
            show: true,
            x: '75%',
            y: '5%',
            feature: {
              magicType: { type: ['line', 'bar'] },
            },
          },
          grid: {
            show: false,
            bottom: '12.5%',
            left: '15%',
            right: '15%',
            top: '30%',
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            scale: true,
            type: 'value',
            splitNumber: '2',
            axisLabel: {
              formatter: '{value} %RH',
            },
          },
          series: [{
            name: '湿度',
            type: 'line',
            data: [],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' },
              ],
            },
          }],
        },
        luxInstance: null,
        luxOption: {
          title: {
            text: '今日  [工作台] 光强',
            x: '5%',
            y: '0%',
          },
          tooltip: {
            trigger: 'axis',
          },
          toolbox: {
            show: true,
            x: '75%',
            y: '5%',
            feature: {
              magicType: { type: ['line', 'bar'] },
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            scale: true,
            type: 'value',
            splitNumber: '2',
            axisLabel: {
              formatter: '{value} Lux',
            },
          },
          grid: {
            show: false,
            bottom: '17.5%',
            left: '15%',
            right: '15%',
            top: '25%',
          },
          series: [
            {
              name: '光强',
              type: 'line',
              data: [],
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' },
                ],
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' },
                ],
              },
            },
          ],
        },
      };
    },
    created() {
      this.$eventHub.$on('resize', () => {
        this.handleResize();
      });
    },
    watch: {
      envs(val) {
        Object.values(val.todayEnvironments).forEach((item) => {
          this.temOption.xAxis.data.push(`${item.createTime.hour}时`);
          this.humOption.xAxis.data.push(`${item.createTime.hour}时`);
          this.luxOption.xAxis.data.push(`${item.createTime.hour}时`);
          this.temOption.series[0].data.push(item.tem.toFixed(2));
          this.humOption.series[0].data.push(item.hum.toFixed(2));
          this.luxOption.series[0].data.push(item.lux.toFixed(2));
        });
        this.tableData[0].value = val.currentEnvironment ? `${val.currentEnvironment.tem.toFixed(2)} °C` : '0 °C';
        this.tableData[1].value = val.currentEnvironment ? `${val.currentEnvironment.hum.toFixed(2)} %RH` : '0 %RH';
        this.tableData[2].value = val.currentEnvironment ? `${val.currentEnvironment.lux.toFixed(2)} Lux` : '0 Lux';
        this.handleUpdate();
      },
      show(val) {
        if (val) {
          this.handleResize();
        }
      },
    },
    methods: {
      handleUpdate() {
        const timer = window.setInterval(() => {
          if (this.$refs.leftTop && this.$refs.leftBottom && this.$refs.rightTop) {
            this.temInstance = echarts.init(this.$refs.leftTop);
            this.temInstance.setOption(this.temOption);
            this.humInstance = echarts.init(this.$refs.leftBottom);
            this.humInstance.setOption(this.humOption);
            this.luxInstance = echarts.init(this.$refs.rightTop);
            this.luxInstance.setOption(this.luxOption);
            window.clearInterval(timer);
          }
        }, 250);
      },
      handleResize() {
        if (this.temInstance && this.$refs.leftTop) {
          window.setTimeout(() => {
            const width = window.getComputedStyle(this.$refs.leftTop).width;
            const height = window.getComputedStyle(this.$refs.leftTop).height;
            this.temInstance.resize(parseInt(width, 10), parseInt(height, 10));
          }, 250);
        }
        if (this.humInstance && this.$refs.leftBottom) {
          window.setTimeout(() => {
            const width = window.getComputedStyle(this.$refs.leftBottom).width;
            const height = window.getComputedStyle(this.$refs.leftBottom).height;
            this.humInstance.resize(parseInt(width, 10), parseInt(height, 10));
          }, 250);
        }
        if (this.luxInstance && this.$refs.rightTop) {
          window.setTimeout(() => {
            const width = window.getComputedStyle(this.$refs.rightTop).width;
            const height = window.getComputedStyle(this.$refs.rightTop).height;
            this.luxInstance.resize(parseInt(width, 10), parseInt(height, 10));
          }, 250);
        }
      },
    },
  };
</script>